<template>
	<view class="login">
		<view class="container">
			<image class="logo" src="@/static/images/logo-1.png" mode="aspectFit"></image>
			<button v-if="!!userinfo.username" @click="yishouquan">已授权点击登陆</button>
			<button v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录</button>
			<view v-show="!if_ty" class="mask" @click="cmask"></view>
		</view>
		<view class="footer">
			<checkbox-group @change="checkChange" name="">
				<label>
					<checkbox @animationend="inAnimation = false" :class="{ trembling: inAnimation }" />
					<text style="color: #141414; font-size: 12px">我已阅读并同意</text>
				</label>
			</checkbox-group>
			<text @click="toNav(`article/article?id=${83}`)">《鞋服在线客户服务隐私协议》</text>
		</view>
		<loginPopup ref="pop"></loginPopup>
	</view>
</template>

<script>
import { login, get_userInfo } from '@/common/common_fun.js';
import API from '@/common/api.js';
export default {
	name: 'login',
	data() {
		return {
			if_ty: false,
			inAnimation: false,
			userinfo: {}
		};
	},
	onLoad() {
		// login((data)=>{
		get_userInfo((data) => {
			this.userinfo = data;
		});
		// })
	},
	methods: {
		checkChange() {
			this.if_ty = !this.if_ty;
		},
		cmask() {
			if (!this.if_ty) {
				this.inAnimation = true;
				uni.showToast({
					title: '请先阅读并同意隐私协议',
					icon: 'none'
				});
				return;
			}
		},
		yishouquan() {
			if (!this.if_ty) {
				this.inAnimation = true;
				uni.showToast({
					title: '请先阅读并同意隐私协议',
					icon: 'none'
				});
				return;
			}
			this.toBack();
		},

		ws_login() {
			return new Promise((resolve, reject) => {
				uni.login({
					success: (event) => {
						const { code } = event;
						const invite_id = uni.getStorageSync('invite_id') || false;
						let params = { code };
						if (invite_id) params.invite_id = invite_id;
						console.log('params', params);
						API.getJson('users_miniLogin', params).then((res) => {
							const { data, code, message } = res;
							if (code === 1) {
								this.$store.commit('$setStore', data);
								resolve(data);
							} else {
								this.msg(message);
							}
						});
					}
				});
			});
		},

		async getPhoneNumber(e) {
			let login_data = {};
			let localStorage = uni.getStorageSync('localStorage') || {};
			try {
				// if (!localStorage) login_data = await this.ws_login();
			} catch (e) {
				//TODO handle the exception
				console.log('login_data = {}');
			}
			console.log('login_data', login_data);
			let params = {
				user_id: localStorage.user_id || login_data.user_id,
				token: localStorage.token || login_data.token,
				encryptedData: e.detail.encryptedData,
				iv: e.detail.iv
			};
			API.getJson('users_bindWxPhone', params).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					this.msg(message, () => {
						this.$refs.pop.open();
					});
				} else {
					this.msg(message);
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.login {
	position: relative;
	height: calc(100vh - var(--window-top));
	background-color: #fff;
	.trembling {
		animation: shake 0.6s;
	}
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100vh;
	}
	.footer {
		display: flex;
		// flex-direction: column;
		align-items: center;
		justify-content: center;
		.fix-c-x();
		z-index: 2;
		bottom: 80rpx;
		// /deep/.u-checkbox-group--row {
		// 	justify-content: center;
		// }

		width: 100%;
		& > text {
			font-size: 24rpx;
			font-family: PingFangSC-Regular-, PingFangSC-Regular;
			font-weight: normal;
			color: #d93d3d;
			white-space: nowrap;
		}
		/deep/uni-checkbox .uni-checkbox-input {
			width: 34rpx;
			height: 34rpx;
			border-radius: 3px !important;
			color: #ffffff !important;
		}
		/deep/checkbox .wx-checkbox-input {
			width: 34rpx;
			height: 34rpx;
			border-radius: 3px !important;
			color: #ffffff !important;
		}
	}
	.container {
		position: relative;
		.fix-c-x();
		.flex-center-y();
		top: 25vh;
		.logo {
			width: 408rpx;
			height: 238rpx;
		}
		.mask {
			position: absolute;
			bottom: 0;
			width: 622rpx;
			height: 96rpx;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			.j-active2();
		}
		button {
			margin-top: 110rpx;
			width: 622rpx;
			height: 96rpx;
			background: #e54e4e;
			box-shadow: 0rpx 16rpx 32rpx 2rpx rgba(203, 54, 54, 0.2), inset 0rpx 2rpx 8rpx 2rpx rgba(255, 255, 255, 0.5);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular-, PingFangSC-Regular;
			font-weight: normal;
			color: #ffffff;
		}
	}
}
</style>
